<script setup>
import liuyunoTabs from "../../components/liuyuno-tabs/liuyuno-tabs.vue";
import {ref} from "vue";
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import Tabbar from "../../components/tabbar.vue";
const index = ref(0)
const tabs = ['未申请','待审批','离校途中','已到家']
const tabChange = (value) => {
  index.value=value
}
const topage5 = () => {
  uni.navigateTo({ url: './page5'})
}
const topage7 = () => {
  uni.navigateTo({ url: './page7'})
}
const topage8 = () => {
  uni.navigateTo({ url: './page8'})
}
</script>

<template>
<view class="tp2m">
  <view class="tp2h">
    <liuyuno-tabs @tabClick="tabChange" :tabindex="index" :tab-data="tabs"></liuyuno-tabs>
  </view>
  <view v-if="index == 0" class="tp2m1">
    <view class="tp2h11">
      <uni-search-bar class="uni-tp2s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
    </view>
    <view class="tp2h12">
      <view class="tp2pian11">
        <view class="tp2tu1"></view>
        <text style="font-size: 25px;">学生姓名</text>
      </view>
      <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
      <view class="tp2line"></view>
      <view class="tp2pian12">
        <view class="tp2tu2"><text style="width: 40px">照片</text></view>
        <text style="font-size: 17px;color: #1c6ed9">假期未申请</text>
        <button class="tp2bt2" @click="topage5">协助确认到达</button>
      </view>
    </view>
  </view>
  <view v-else-if="index == 1" class="tp2m1">
    <view class="tp2h11">
      <uni-search-bar class="uni-tp2s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
    </view>
    <view class="tp2h22">
      <view class="tp2pian11">
        <view class="tp2tu1"></view>
        <text style="font-size: 25px;">学生姓名</text>
      </view>
      <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
      <view class="tp2line"></view>
      <view class="tp2pian22">
        <view class="tp2tu2"><text style="width: 40px">照片</text></view>
        <text style="font-size: 17px;color: #1c6ed9">留校申请待审批</text>
        <button class="tp2bt2" @click="topage7">审核通过</button>
      </view>
    </view>
    b<br>
    <view class="tp2h22">
      <view class="tp2pian11">
        <view class="tp2tu1"></view>
        <text style="font-size: 25px;">学生姓名</text>
      </view>
      <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
      <view class="tp2line"></view>
      <view class="tp2pian22">
        <view class="tp2tu2"><text style="width: 40px">照片</text></view>
        <text style="font-size: 17px;color: #1c6ed9">离校申请待审批</text>
        <button class="tp2bt2"  @click="topage8">审核通过</button>
      </view>
    </view>
  </view>
  <view v-else-if="index == 2" class="tp2m1">
    <view class="tp2h11">
      <uni-search-bar class="uni-tp2s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
    </view>
    <view class="tp2h22">
      <view class="tp2pian11">
        <view class="tp2tu1"></view>
        <text style="font-size: 25px;">学生姓名</text>
      </view>
      <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
      <view class="tp2line"></view>
      <view class="tp2pian22">
        <view class="tp2tu2"><text style="width: 40px">照片</text></view>
        <text style="font-size: 17px;color: #1c6ed9">离校审核通过</text>
        <button class="tp2bt2">拨打电话</button>
      </view>
    </view>
    b<br>
    <view class="tp2h22">
      <view class="tp2pian11">
        <view class="tp2tu1"></view>
        <text style="font-size: 25px;">学生姓名</text>
      </view>
      <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
      <view class="tp2line"></view>
      <view class="tp2pian22">
        <view class="tp2tu2"><text style="width: 40px">照片</text></view>
        <text style="font-size: 17px;color: #1c6ed9">离校审核通过</text>
        <button class="tp2bt2">拨打电话</button>
      </view>
    </view>
  </view>
  <view v-else-if="index == 3" class="tp2m1">
    <view class="tp2h11">
      <uni-search-bar class="uni-tp2s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
    </view>
    <view class="tp2h22">
      <view class="tp2pian11">
        <view class="tp2tu1"></view>
        <text style="font-size: 25px;">学生姓名</text>
      </view>
      <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校申请时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">行程登记时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">计划达到时间：2023/11/17 00:00:00</text>
      <br>
      <text style="font-size: 12px;color: #666666">离校目的地：成都市郫都区禹庙上街与静园东路交叉口西120米</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人姓名：姓名</text>
      <br>
      <text style="font-size: 12px;color: #666666">紧急联系人电话:15884418478</text>
      <view class="tp2line"></view>
      <view class="tp2pian22">
        <view class="tp2tu2"><text style="width: 40px">照片</text></view>
        <text style="font-size: 17px;color: #1c6ed9">离校确认到达</text>
        <button class="tp2bt2">拨打电话</button>
      </view>
    </view>
  </view>
  <view class="tabh"><Tabbar :cur-index="1"/></view>
</view>
</template>

<style scoped lang="scss">
.tp2m{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(240, 248, 250, 1);
  width: 375px;
  height: 1000px;
}
.tp2m1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 375px;
}
.tp2h{
  display: flex;
}
.tp2h11{
  display: flex;
  justify-content: center;
  width: 100%;
}
.uni-tp2s1{
  width: 90%;
  height: 40px;
}
.tp2h12{
  height: 150px;
  width: 85%;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 3px #666666;
  padding: 10px;
}
.tp2pian11{
  display: flex;
  align-items: center;
  height: 30px;
}
.tp2tu1{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #87CEFA;
}
.tp2line{
  border-bottom: 1px solid #666666;
  margin: 20px 10px;
}
.tp2pian12{
  display: flex;
  align-items: center;
  align-content: center;
}
.tp2tu2{
  background-color: #87CEFA;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp2h22{
  height: 300px;
  width: 85%;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 3px #666666;
  padding: 10px;
}
.tp2pian22{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}
.tp2bt2{
  background-color: #1E90FF;
}
.tabh{
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>